<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>速度动画</title>
<style>
body,div,span{
	margin:0;
	padding:0;
	}
#div1{
	width:200px;
	height:200px;
	background:red;
	position:relative;
	left:-200px;
	}
#div1 span{
	width:20px;
	height:50px;
	background:blue;
	position:absolute;
	left:200px;
	top:75px;
	}		
</style>
<script>
window.onload = function(){
	var oDiv = document.getElementById('div1');
	oDiv.onmouseover = function(){
		startMove(0);
		}
	oDiv.onmouseout = function(){
		startMove(-200);
		}	
	var timer = null;
	function startMove(iTarget){
		clearInterval(timer);
		var oDiv = document.getElementById('div1');
		timer = setInterval(function(){
			var speed =(iTarget-oDiv.offsetLeft)/20;
			speed = speed>0?Math.ceil(speed):Math.floor(speed);
			if(oDiv.offsetLeft==iTarget){
				clearInterval(timer);
				}
			else{
				oDiv.style.left=oDiv.offsetLeft+speed+'px';
				}	
			},30) 
		}			
	}
</script>
</head>

<body>
<div id="div1">
<span id="share">分享</span>
</div> 
</body>
</html>
